<!DOCTYPE html>
<html lang="en">


<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <p class="next">今天是11月21日<span>星期六</span></p>
    <p class="title">下课倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="scond">20</span>
    </p>
    <p class="tips">17:40:00下课</p>
  </div>
  <script>
    // 做倒计时要有两个时间 未来时间A 现在时间B A-B就是时间差 ，毫秒的差，转成时分秒


    // 随机颜色函数
    // 1. 自定义一个随机颜色函数 #00FF00 rgb(255,255,255)
    // a.style.color = '#FFFF00'  // 三原色 Red Green Blue   0-F 的6位数
    // a.style.color = 'rgb(255,0,0)'  // 三原色 Red Green Blue   rgb(255,0,0)  0-255
    function col(rgb) {
      if (rgb) {
        let r=Math.floor(Math.random()*256)
        let g=Math.floor(Math.random()*256)
        let b=Math.floor(Math.random()*256)
        return `rgb(${r},${g},${b})`
      }else{
        let arr=[1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
        let n='#'
        for (let i = 0; i < 6; i++) {
          n+=arr[i]
          
        }
        return n
      }
    }

    let div=document.querySelector('.countdown')
    

    
    function name() {
    let data=new Date()
    let last=new Date('2024-11-21 17:40:00')
    // console.log(parseInt((last-data)/1000/3600));
    // console.log(parseInt(((last-data)/1000)/60%60));
    // console.log(parseInt((last-data)/1000%60));

    let num=(last-data)/1000
    
    let h=parseInt(num/3600)
    let m=parseInt(num/60%60)
    let s=parseInt(num%60)

    document.querySelector('#hour').innerHTML=h<10?'0'+h:h
    document.querySelector('#minutes').innerHTML=m<10?'0'+m:m
    document.querySelector('#scond').innerHTML=s<10?'0'+s:s
    let arr=['星期日','星期一'	,'星期二'	,"星期三"	,'星期四'	,'星期五'	,'星期六'	]
    document.querySelector('.next span').innerHTML=arr[data.getDay()]
    div.style.backgroundColor=col(true)
    }

    name()
    setInterval(name,1000)

    
    

    // 页面刷新随机得到颜色

    // 修改星期

    

    // 函数封装 getCountTime

    
   // 让倒计时生效



  </script>
</body>

</html>